import React from 'react'
import { Text, TouchableOpacity, View, ScrollView, Image, ImageBackground } from 'react-native'
import { globalColor, pxPage, throttle } from '../../common/Common';
import { Header } from 'react-native-elements';//可以用来写title
import ScrollableTabView, { DefaultTabBar, ScrollableTabBar } from 'react-native-scrollable-tab-view';
import { connect } from 'react-redux'
import RankingData from '../../redux/actions/Ranking_action'

const RankingChoice = (props) => {
    props.dispatch(RankingData())
    return <ScrollableTabView
        style={{}}
        tabBarPosition='top'//tabBarPosition默认top  位于屏幕顶部   bottom位于屏幕底部  overlayTop悬浮在顶部
        initialPage={0} //初始化时被选中的Tab下标，默认是0
        locked={false}//表示手指是否能拖动视图  默认false  true则不能拖动,只可点击
        renderTabBar={() => <DefaultTabBar />}
        tabBarUnderlineStyle={{ backgroundColor: '#FE7D6D' }}//设置DefaultTabBar和ScrollableTabBarTab选中时下方横线的颜色
        tabBarBackgroundColor='#FFFFFF'//设置整个Tab这一栏的背景颜色
        tabBarActiveTextColor='#FE7D6D'//设置选中Tab的文字颜色
        tabBarInactiveTextColor='#FEA6C4'//设置未选中Tab的文字颜色
        tabBarTextStyle={{ fontSize: 15, fontWeight: 'bold', }}//设置Tab文字的样式
        onChangeTab={(obj) => {//Tab切换之后会触发此方法
            console.log('index:' + obj.i);
        }}
        onScroll={(postion) => {  //视图正在滑动的时候触发此方法
            // float类型 [0, tab数量-1]
            console.log('scroll position:' + postion);
        }}
    >
        <View tabLabel='国产动漫'>
            {/* 传入参数：data，排行榜的数据 */}
            <List data={props.rankingData.ani2} props={props} />
        </View>
        <View tabLabel='美国动漫'>
            <List data={props.rankingData.ani1} props={props} />
        </View>
        <View tabLabel='日本动漫'>
            <List data={props.rankingData.ani3} props={props} />
        </View>
        <View tabLabel='英国动漫'>
            <List data={props.rankingData.ani4} props={props} />
        </View>

    </ScrollableTabView>
}

const List = ({ data, props }) => {
    return <ScrollView>
        {data?.map((item, index) => {
            return <TouchableOpacity key={index} style={{ marginBottom: pxPage(10) }}
                onPress={throttle(() => {
                    props.navigation.navigate('Detail', {
                        item: item
                    })
                }, 2000)}
            >
                <View style={{
                    flexDirection: "row",
                    height: pxPage(190),
                    alignContent: 'center',
                    justifyContent: 'center',
                    alignItems: 'center',
                    marginTop: pxPage(10),
                    marginLeft: pxPage(40)
                }}>
                    {/* 动漫排名部分 */}
                    <View
                        style={{
                            flexDirection: "row",
                            justifyContent: 'center',
                            alignContent: 'center',
                            alignContent: 'center',
                        }}><Text
                            style={{
                                fontStyle: 'italic',
                                fontSize: (index < 3 ? 80 : 40),
                                color: (index < 3 ? '#F2A265' : '#B8C4C7')
                            }}>{index < 3 || index > 8 ? index + 1 : '0' + (index + 1)}</Text></View>

                    {/* 动漫封面部分 */}
                    <Image
                        style={{
                            width: pxPage(126),
                            height: pxPage(171),
                            borderWidth: 1.5,
                            borderColor: '#F1687A',
                            shadowColor: '#999',
                            borderColor: '#f1687a',
                            borderWidth: 1,
                            backgroundColor: '#eee'
                        }}
                        source={{ uri: item.img }}></Image>

                    {/* 文字简介部分 */}
                    <View style={{
                        width: pxPage(245), height: pxPage(171), padding: pxPage(15)
                    }}>
                        <Text style={{
                            fontWeight: 'bold',
                            fontSize: 15,
                            marginBottom: pxPage(8)
                        }}>{item.name.length <= 10 ? item.name : item.name.slice(0, 10) + '...'}</Text>
                        <Text style={{ color: '#888', fontSize: 14, marginBottom: pxPage(3) }}>{item.synopsis.split('，')[0]}</Text>
                        <Text style={{ color: '#666', fontSize: 13, marginBottom: pxPage(3) }}>类型: {item.type}</Text>
                        <Text style={{ color: '#666', fontSize: 13, marginBottom: pxPage(3) }}>地区: {item.region}</Text>
                        <Text style={{ color: '#666', fontSize: 13, marginBottom: pxPage(3) }}>年代: {item.years}</Text>
                        <Text style={{ color: '#666', fontSize: 13, marginBottom: pxPage(3) }}>标签: {item.label}</Text>

                    </View>
                </View>

            </TouchableOpacity>
        })}
        <ScrollView style={{ height: pxPage(20) }}></ScrollView>
    </ScrollView>
}

const mapStateToProps = state => {
    return {
        rankingData: state.rankingData
    }
}
export default connect(mapStateToProps)(RankingChoice)

